<template>
  <div class="person">
    <div class="left">
      <el-card>
        <div class="tab-tilte">
          <div class="todoList" @click="changeTab(0)" :class="{ active: cur == 0 }">
            <i class="el-icon-edit"></i>
            我的待办
          </div>
          <div class="doneList" @click="changeTab(1)" :class="{ active: cur == 1 }"><i
            class="el-icon-document-checked"></i>
            我的已办
          </div>
          <div
            class="transferList"
            @click="changeTab(2)"
            :class="{ active: cur == 2 }"
          >
            <i class="el-icon-s-promotion"></i>当前转办
          </div>
          <div class="circulateList" @click="changeTab(3)" :class="{ active: cur == 3 }"><i class="el-icon-edit"></i>
            我的待阅
          </div>
          <div class="doneProcess" @click="changeTab(4)" :class="{ active: cur == 4 }">
          <i class="el-icon-document-checked"></i>
            我的流程
          </div>
        </div>
      </el-card>
      <div class="tab-content">
        <div v-show="cur == 0">
          <TodoList
            @listenClickDetail="listenClickDetail"
            ref='TodoList'
          />
        </div>
        <div v-show="cur == 1">
          <DoneList
            @listenClickDetail="listenClickDetail"
            ref='DoneList'
          />
        </div>
        <div v-show="cur == 2">
          <TransferList ref='TransferList'/>
        </div>
        <div v-show="cur == 3">
          <CirculateList
            @listenClickDetail="listenClickDetail"
            ref='CirculateList'/>
        </div>
        <div v-show="cur == 4">
          <DoneProcess
            ref='DoneProcess'
            @listenClickDetail="listenClickDetail"
          />
        </div>
      </div>
    </div>
    <div class="right"
         style="height: 100%">
      <!--我的流程-->
      <div class="processLeft">
        <el-card>
          <div class="processList"><span><i class="el-icon-d-arrow-right"></i>流程申请({{this.processListNum}})</span></div>
        </el-card>
        <el-card style="height:803px;margin-top: 16px;overflow-y:auto;">
          <div class="processContent">
            <div class="processContentChildren" style="background: linear-gradient(to right, #8fc99a, #d5d5d6);"
              @click="launchProcess(i)" v-for="(item,i) in processtableData" :key="'children' + i">
              <span class="processContentChildrenText">{{ item.procDefName }}</span>
              <span class="clickCollect" @click.stop="submitCollect(i)"
              :style="item.isCollect == 1 ? 'color: yellow' : 'color: white'">
            <i class="el-icon-star-on"></i></span>
            </div>
          </div>
        </el-card>
      </div>
      <!--我的收藏-->
      <div class="processRight">
        <el-card>
          <div class="collectList"><span><i class="el-icon-star-off"></i>我的收藏({{ this.collectListNum }})</span></div>
        </el-card>
        <el-card style="height:803px;margin-top: 16px;overflow-y:auto;">
          <div class="collectContent">
            <div class="collectContentChildren" style="background: linear-gradient(to right, #bdbfc1, #dedfe0);"
              @click="launchCollect(i)" v-for="(item,i) in collecttableData" :key="'children' + i">
              <span class="collectContentChildrenText">{{ item.procDefName }}</span>
              <span class="cancelCollect" @click.stop="submitCancel(i)"><i class='el-icon-star-on'></i></span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!--      流程详情弹窗  -->
    <el-dialog
      :title="detaileQueryParam.type"
      :visible.sync="dialogVisible"
      width="75%"
    >
      <ProcessDetail
        v-if="dialogVisible"
        :detaileQueryParam="detaileQueryParam"
        @reloadPage="reloadPage"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TodoList from './components/todoList.vue'
import DoneList from './components/doneList.vue'
import TransferList from './components/transferList.vue'
import DoneProcess from './components/doneProcess.vue'
import CirculateList from './components/circulateList.vue'
import ProcessDetail from '@/views/workflow/approval/ProcessDetail'

export default {
  components: {
    TodoList,
    DoneList,
    TransferList,
    DoneProcess,
    CirculateList,
    ProcessDetail
  },
  data () {
    return {
      colorlists: ['linear-gradient(to bottom, red, green)', '#4398f0', 'pink', '#8fc99a'],
      colorRender: '',
      tabTitle: ['标题一', '标题二', '标题三'],
      tabMain: ['内容一', '内容二', '内容三'],
      cur: 0, // 默认选中第一个tab
      processtableData: [],
      collecttableData: [],
      processListNum: '',
      collectListNum: '',
      pageData: {
        total: 0,
        size: 10,
        page: 0
      },
      dialogVisible: false,
      detaileQueryParam: { type: '' }
    }
  },
  created () {
    this.init()
  },
  methods: {
    changeTab (num) {
      this.cur = num
      if (num === 0) {
        this.$refs.TodoList.todoFn()
      } else if (num === 1) {
        this.$refs.DoneList.doneFn()
      } else if (num === 2) {
        this.$refs.TransferList.transferFn()
      } else if (num === 3) {
        this.$refs.CirculateList.circulateFn()
      } else if (num === 4) {
        this.$refs.DoneProcess.doneProcessFn()
      }
    },
    init () {
      this.processFn()
      this.collectFn()
    },
    // 我的流程
    processFn () {
      let param = {
        type: 1
      }
      this.$http.get('/api/actRdCollects/selectActByUserId', { params: param }).then((response) => {
        this.processtableData = response.data.data
        this.processListNum = response.data.data.length
      })
    },
    // 发起流程(我的流程)
    launchProcess (index) {
      let param = {
        proDefId: this.processtableData[index].procDefId
      }
      this.$http.get('/api/actRdCollects/launchProcess', { params: param }).then((response) => {
        this.$router.push({
          path: '/launchprocess',
          query: {
            formId: response.data.data.formId,
            processDefinitionId: response.data.data.processDefinitionId
          }
        })
      })
    },
    // 发起流程(我的收藏)
    launchCollect (index) {
      let param = {
        proDefId: this.collecttableData[index].procDefId
      }
      this.$http.get('/api/actRdCollects/launchProcess', { params: param }).then((response) => {
        this.$router.push({
          path: '/launchprocess',
          query: {
            formId: response.data.data.formId,
            processDefinitionId: response.data.data.processDefinitionId
          }
        })
      })
    },
    // 点击收藏
    submitCollect (index) {
      if (this.processtableData[index].isCollect == 0) {
        let param = {
          proDefId: this.processtableData[index].procDefId,
          type: 1
        }
        this.$http.get('/api/actRdCollects/addCollect', { params: param }).then((response) => {
          this.$message({
            message: '已收藏',
            type: 'success',
            center: true
          })
          this.init()
        })
      } else {
        let param = {
          proDefId: this.processtableData[index].procDefId,
          type: 0
        }
        this.$http.get('/api/actRdCollects/addCollect', { params: param }).then((response) => {
          this.$message({
            message: '已取消收藏',
            type: 'success',
            center: true
          })
          this.init()
        })
      }

    },
    // 我的收藏
    collectFn () {
      let param = {
        type: 2
      }
      this.$http.get('/api/actRdCollects/selectActByUserId', { params: param }).then((response) => {
        this.collecttableData = response.data.data
        this.collectListNum = response.data.data.length
      })
    },
    // 取消收藏
    submitCancel (index) {
      let param = {
        proDefId: this.collecttableData[index].procDefId,
        type: 0
      }
      this.$http.get('/api/actRdCollects/addCollect', { params: param }).then((response) => {
        this.$message({
          message: '已取消收藏',
          type: 'success',
          center: true
        })
        this.init()
      })
    },
    // 流程详情
    listenClickDetail (json) {
      this.detaileQueryParam = json
      this.dialogVisible = true
    },
    reloadPage () {
      window.location.reload()
    }
  }
}
</script>
<style lang="less" scoped>
@import "../admin/styles/formStyle.less";

.person {
  display: flex;
  height: 100%;
  width: 100%;

  .left {
    width: 55%;
    margin-right: 20px;

    .tab-tilte {
      display: flex;
      justify-content: space-around;
      font-size: 16px;

      .doneList , .todoList , .transferList , .doneProcess , .circulateList{
        padding: 11px 10px 11px 10px;
        background-color: white;
        color: black;
        border-radius: 5px;
        border: 2px solid grey;
      }
    }

    .tab-content {
      margin-top: 16px;
    }
  }

  .right {
    flex: 1;
    display: flex;
    .processLeft {
      width: 50%;
      margin-right: 20px;

      .processList {
        font-size: 16px;
        border-radius: 5px;
        padding: 13px 10px 13px 10px;
        background-color: #8fc99a;
        color: white;

        .el-icon-d-arrow-right {
          margin-right: 10px;
        }
      }

      .processContent {
        height: 100%;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        overflow-y: auto;
        align-content: flex-start;

        .processContentChildren {
          font-size: 17px;
          margin: 5px;
          width: 85%;
          height: 70px;
          border-radius: 8px;
          position: relative;
          display: flex;
          align-items: center;
          cursor: pointer;

          .processContentChildrenText {
            margin-left: 20px;
            width: 60%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .clickCollect {
            font-size: 30px;
            margin-bottom: 60px;
            position: absolute;
            right: 6px;
            bottom: -45px;
          }
        }
      }
    }

    .processRight {
      width: 50%;

      .collectList {
        font-size: 16px;
        border-radius: 5px;
        padding: 13px 10px 13px 10px;
        background-color: #b5b5b5;
        color: white;

        .el-icon-star-off {
          margin-right: 10px;
        }
      }

      .collectContent {
        height: 100%;
        margin-top: 20px;
        margin-right: 0px;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        justify-content: center;
        align-content: flex-start;

        .collectContentChildren {
          cursor: pointer;
          font-size: 16px;
          margin: 5px;
          width: 85%;
          height: 70px;
          border-radius: 8px;
          position: relative;
          display: flex;
          align-items: center;
          background-color: #CDCDCD;

          .collectContentChildrenText {
            margin-left: 20px;
            width: 60%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .cancelCollect {
            font-size: 30px;
            margin-bottom: 60px;
            position: absolute;
            right: 6px;
            bottom: -45px;
            color: yellow;
          }
        }
      }
    }
  }
}

::v-deep #tab-first {
  background-color: grey;
  margin-top: 30px;
}

::v-deep .el-tabs__header {
  padding-bottom: 30px;
}

.active {
  background-color: #4398f0 !important;
  color: white !important;
  border: none !important;
}
</style>
<style lang="less">
.person {
  .el-dialog {
    height: 90%;
    display: flex;
    flex-direction: column;

    .el-tabs__header {
      padding: 0;
      height: 49px;
    }

    .el-dialog__footer {
      padding: 10px 25px;
      height: 61px;
    }

    .el-dialog__body {
      flex: 1;
      padding: 0 !important;
    }
  }
}
</style>
